<template>
  <div class="lin-container" v-if="!showAdd">
    <div class="lin-title" >补货申请</div>
    <div class="lin-wrap-ui">
      <el-card  class="box-card" style="margin-bottom:50px;padding-bottom: 50px">
        <div slot="header">
          <el-row>
            <el-col :span="12">
              <span>补货单</span>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <span>销售单</span>-->
            <!--            </el-col>-->
          </el-row>

        </div>
        <el-row>
          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <el-input placeholder="请输入内容" size="medium" v-model="form.username" disabled>>
              <template slot="prepend"
              >申请人</template
              >
            </el-input>
          </el-col>
          <!--        </el-row>-->
          <!--        <el-row style="margin-top:20px;margin-bottom:20px;">-->
          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <el-input placeholder="请输入内容" size="medium" v-model="form.shop_name" disabled>>
              <template slot="prepend"
              >店铺</template
              >
            </el-input>
          </el-col>
        </el-row>
        <el-collapse>

        </el-collapse>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="goods_name" label="商品名" width="240"></el-table-column>
          <el-table-column prop="goods_price" label="单价" width="240"></el-table-column>
          <el-table-column label="数量" width="240" >
            <template slot-scope="props">
              <el-input  placeholder="请输入内容" size="mini"  v-model="props.row.number"  />
            </template>
          </el-table-column>
          <!--          <el-table-column  prop="city" label="总价" width="200"></el-table-column>-->
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" plain @click="handleDelete(scope)">删除</el-button>
            </template>

          </el-table-column>
        </el-table>


        <el-row style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
          <el-col :span = "12">
            <el-button  @click="handleAdd()" type="primary" style="float: right;margin-left:20px;margin-right:20px;">添加商品</el-button>
          </el-col>
          <el-col :span = "12">
            <el-button @click="handleSubmits()" type="success" style="float: left;margin-left:20px;margin-right:20px;">提交单据</el-button>
          </el-col>
        </el-row>


        <!--                  <el-collapse-item title="查看代码" name="2">-->
        <!--                    <div style="white-space: pre-wrap;">{{ complex }}</div>-->
        <!--                  </el-collapse-item>-->
      </el-card>
    </div>
  </div>
  <goods-select v-else @back="back" @backWithRow="backWithRow"></goods-select>
</template>

<script>
import Vue from 'vue'
import GoodsSelect from './goods-select'
import saleList from '@/model/shopList'
import shopList from '@/model/shopList'

export default {
  components: {
    GoodsSelect
  },
  name: 'shop-sale',
  data() {
    return {
      num: 1,
      showAdd: false,
      input: '',
      form: {
        id: '',
        username: '',
        shop_name: '',
        shop_list_details: [],
      },
      tableData: [],
    }
  },
  methods: {

    handleAdd(val) {
      console.log('val', val)
      this.showAdd = true
      // this.editBookID = val.row.id
    },
    back() {
      this.showAdd = false
      // this.getBooks()
    },
    backWithRow(val) {
      console.log(val)
      // val.row.assign('ss', 1)
      // const number = { number: 2 }
      // const newRow = Object.assign(val.row, number)
      Vue.set(val.row, 'number', 1)
      this.tableData.push(val.row)
      console.log(this.tableData)
      this.showAdd = false
    },
    handleChange(value) {
      console.log(value)
    },
    handleDelete(val) {
      console.log(val.$index)
      this.$confirm('是否删除该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        Vue.delete(this.tableData, val.$index)
      })
    },
    handleSubmits() {
      this.form.shop_list_details = this.tableData
      console.log(this.form)
      this.$confirm('是否提交补货单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(async () => {
        const res = await saleList.createReplenishApply(this.form)
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.$message({
            type: 'success',
            message: res.message,
          })
          this.tableData = []
        }
      })
    }
  },
  created() {
    const { user } = this.$store.state
    console.log(user)
    console.log('wjjnb')
    this.form.id = user && user.id ? user.id : 999
    this.form.username = user.username
    this.form.shop_name = user.shop_name
  },

}
</script>

<style lang="scss" scoped>
@import 'src/plugin/lin-cms-ui/assets/style/container.scss';

.input-with-select /deep/ .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  border-right: none;
}

.container {
  padding: 0 30px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }
}

</style>
